<template>
<div class="like-color-item box-shadow_2">
    <div 
        class="container" 
        @click="toPath">
        <div class="one item"
            :style="{
                backgroundColor:itemData.one,
            }">
        </div>
        <div class="two item"
            :style="{
                backgroundColor:itemData.two,
            }">
        </div>
        <div class="three item"
            :style="{
                backgroundColor:itemData.three,
            }">
        </div>
        <div class="four item"
            :style="{
                backgroundColor:itemData.four,
            }">
        </div>
        <div 
            class="remove" 
            @click.stop="onRemove">
            <Remove></Remove>
        </div>
    </div>
</div>
</template>

<script>
import Remove from '@/components/other/Remove';
export default {
    components: {Remove},
    props:{
        itemData:{ //对象数据
            type:Object,
            default:()=>{
                return {};
            },
        },
    },
    methods:{
        toPath(){
            this.$router.push({
                path:'Color',
                params:{
                    id:this.itemData.id,
                },
            }).catch(() =>{
                return;
            });
        },
        onRemove(){
            this.$store.commit('deleteMyLike',{
                color:this.itemData.id,
            }); //删除一个我的like
        },
    },
}
</script>
<style lang="scss" scoped>
.like-color-item{
    width: 100%;
    border: none;
    background-color: white;
    box-sizing: border-box;
    border-radius: 5px;
    padding: 3px;
    >.container{
        overflow: hidden;
        position: relative;
        border-radius: 3px;
        >.item{
            width: 100%;
            position: relative;
            cursor: pointer;
        }
        >.one{
            height: 25px;
        }
        >.two{
            height: 15px;
        }
        >.three{
            height: 10px;
        }
        >.four{
            height: 10px;
        }
        >.remove{
            position: absolute;
            top: 3px;
            right: 3px;
            opacity: 0;
            transition: all 0.2s;
            /deep/.remove{
                font-size: 1.1rem;
                width: 15px;
                height: 15px;
            }
        }
        &:hover{
            >.remove{
                opacity: 1;
            }
        }
    }
    
}
</style>

